<template>
  <div
    class="versionUp"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <!-- 版本升级页面 -->
    <!-- 标题 -->
    <div class="title">选择购买信息</div>
    <!-- 版本选择 -->
    <div class="versionTab version-item">
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane
          v-for="(item, index) in versionTabData"
          :key="index"
          :label="item.sv_versionname"
          :name="item.gid"
          :value="item"
        >
          <span slot="label">
            {{item.sv_versionname}}
            <i :class="item.sv_versionid=='5' ? 'versionTip' : '' "></i>
          </span>
          <!-- 高级版以及对应套餐 -->
          <el-form v-model="advancedData" v-if="item.sv_versionid=='4'" label-width="100px">
            <el-form-item label="购买方式：">
              <el-radio-group v-model="advancedData.buyUnits" @change="handleAdvancedBuyUnits">
                <el-radio label="年">按年购买</el-radio>
                <el-radio :disabled="item.is_version_pack" label="月">按月购买</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="advancedData.buyUnits == '年'" label="选择年限：">
              <el-radio-group
                v-model="advancedData.advancedYear"
                size="small"
                @change="handleAdvancedYear"
              >
                <el-radio-button label="1"></el-radio-button>
                <el-radio-button label="2"></el-radio-button>
                <el-radio-button label="3"></el-radio-button>
                <el-radio-button label="4"></el-radio-button>
                <el-radio-button label="5"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-else="advancedData.buyUnits == '月'" label="选择月限：">
              <el-input-number
                v-model="advancedData.advancedMonth"
                @change="handleAdvancedMonth"
                :min="1"
                :max="12"
                size="mini"
                style="margin-right: 30px"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="费用总计："
              style="color: red"
            >{{sv_distributororder.sv_do_price}}代币/店/{{advancedData.buyUnits}}</el-form-item>
          </el-form>
          <!-- 连锁版以及对应套餐 -->
          <el-form v-model="chainData" v-else-if="item.sv_versionid=='3'" label-width="100px">
            <!-- 选择方式 -->
            <el-form-item label="选择方式：">
              <el-radio-group v-model="chainData.chooseWay" @change="handleChooseWay">
                <el-radio label="subbranch" :disabled="sv_versionid != '3' ? true : false">购买分店</el-radio>
                <el-radio label="renew" :disabled="sv_versionid != '3' ? true : false">续费店铺</el-radio>
              </el-radio-group>
              <!-- 店铺选择框 -->
              <el-select
                v-model="chainData.shopName"
                @change="handleChainShop"
                :disabled="sv_versionid != '3' ? true : false"
                style="margin-left: 20px"
                filterable
              >
                <el-option label="所有店铺" value="allShops"></el-option>
                <el-option
                  v-for="(item, index) in chainShops"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 购买分店数 -->
            <el-form-item label="分店数量：" :style="{display: sv_versionid != '3'?'none':''}">
              <el-input-number
                v-model="chainData.chainBuyNum"
                @change="handleChainBuyNum"
                :min="1"
                size="mini"
                style="margin-right: 30px"
                :disabled="chainData.chooseWay == 'renew' ? true : false"
              ></el-input-number>
            </el-form-item>
            <!-- 选择年限 -->
            <el-form-item label="选择年限：">
              <el-radio-group v-model="chainData.chainYear" @change="handleChainYear" size="small">
                <el-radio-button label="1"></el-radio-button>
                <el-radio-button label="2"></el-radio-button>
                <el-radio-button label="3"></el-radio-button>
                <el-radio-button label="4"></el-radio-button>
                <el-radio-button label="5"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="费用总计：" style="color: red">{{sv_distributororder.sv_do_price}}代币/店/年</el-form-item>
          </el-form>
          <!-- 至尊版以及对应套餐 -->
          <el-form v-model="extremeData" v-else="item.sv_versionid=='5'" label-width="100px">
            <el-form-item label="购买店数：">
              <el-input-number
                v-model="extremeData.extremeBuyNum"
                @change="handleExtremeBuyNum"
                :min="1"
                size="mini"
                style="margin-right: 30px"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="费用总计："
              style="color: red"
            >{{sv_distributororder.sv_do_price}}代币/店/永久</el-form-item>
          </el-form>
          <!-- 备注 -->
          <div class="comment">
            <div class="comment_title">版本备注：</div>
            <span class="comment_combo">{{combo}}</span>
            <el-tooltip class="item" effect="dark" :content="sv_remarks" placement="top">
              <i
                style="color: #30c17b;font-size: 20px;cursor: pointer"
                class="iconfont iconwenhao1"
              ></i>
            </el-tooltip>
          </div>
          <!-- 支付 -->
          <div class="price">
            结算代币
            <span class="actuallyPaid">{{actuallyPaid}}代币</span>
            <el-button style="padding: 8px 20px" type="primary" @click="handlePayFor">确认</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      // 标签页数据
      activeName: "", // 默认激活
      versionTabData: [], // 标签栏的数据
      package_remarks: "", // 套餐信息
      sv_remarks: "版本信息", // 套餐备注
      combo: "", // 套餐信息
      buyText: "购买",
      // --------------------
      // 升级续费的数据
      sv_distributororder: {
        sv_do_price: "", // 套餐的价格---sv_versionsaleprice
        sv_paytype: "余额支付", // 支付类型
        order_count: "", // 购买年数
        sv_salesversion: "", // 版本名---sv_versionname
        sv_salesversionid: "", // 版本id---sv_versionid
        sv_versionunit: "", // 购买的单位--年/月/个店
        user_id: "", // 店铺id
        ShopNumber: "", // 购买分店数
        is_version_pack: false, // 是否是套餐
        gid: "", // 套餐标识id
        IsAddShop: "", // 购买的类型
        sv_salestype: "" //  订单销售类型
      },
      // --------------------
      // 高级版的数据
      advancedData: {
        buyUnits: "年", // 购买的单位，年/月
        advancedYear: 1, // 续费年数
        advancedMonth: 1 // 续费月数
      },
      // --------------------
      // 连锁版的数据
      chainData: {
        chooseWay: "renew", // subbranch--购买分店，renew--续费店铺
        chainYear: 1, // 选择续费年数
        shopName: "所有店铺", // 选中的店铺
        chainBuyNum: 1 // 购买的分店数量
      },
      chainShops: [], // 连锁店的所有店铺信息
      // --------------------
      // 至尊版的数据
      extremeData: {
        extremeBuyNum: 1 // 购买的分店数量
      },
      // --------------------
      // 续费升级的店铺信息
      sv_versionid: "", // 店铺原来的版本id
      user_id: "", // 店铺id || 总店id
      subbranch_id: "", // 分店id
      actuallyPaid: "", // 实付金额
      myToken: "" // 令牌
    };
  },
  methods: {
    // 初始化的函数集
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 获取店铺原有版本id和店铺id
      this.sv_versionid = this.$route.query.sv_versionid;
      this.user_id = this.$route.query.user_id;
      this.sv_distributororder.user_id = this.user_id;
      // 获取套餐信息
      // 根据店铺的版本id去限制部分续费升级
      /**
       *  1.高级版不得直接升级连锁版本
       *  2.连锁版本不可以改为高级版本
       *  3.至尊版只能升级续费至尊版本
       */
      if (this.sv_versionid == "4") {
        this.allPackages("3,5");
      } else if (this.sv_versionid == "3") {
        this.allPackages("3,5");
      } else if (this.sv_versionid == "5") {
        this.allPackages("5");
      } else {
        this.allPackages("3,4,5");
      }
      // 如果是连锁版店铺，获取连锁版店铺所有的分店
      if (this.sv_versionid == "3") {
        this.$api
          .obtainChainStoreBranches(this.user_id, this.myToken)
          .then(res => {
            this.chainShops = res.map(v => {
              if (this.user_id == v.user_id) {
                v.sv_us_name = v.sv_us_name + "(总店)";
              }
              return { label: v.sv_us_name, value: v.user_id };
            });
            // 如果进行升级续费的店铺是连锁版本的，需要实际价格需要算上店铺数量
            this.actuallyPaid =
              this.sv_distributororder.sv_do_price * this.chainShops.length;
          });
      }
    },
    // 获取套餐包的方法
    allPackages(id) {
      this.loading = true;
      this.$api.accordingToIdGetVersion(id, false, this.myToken).then(res => {
        this.loading = false;
        const { list } = res;
        // 初始购买数据为获取的第一个版本的数据
        this.sv_distributororder.sv_do_price = list[0].sv_versionsaleprice; //  套餐的价格
        this.sv_distributororder.order_count = 1; // 购买年数
        this.sv_distributororder.sv_salesversion = list[0].sv_versionname; // 销售版本
        this.sv_distributororder.sv_salesversionid = list[0].sv_versionid; // 销售版本id
        this.sv_distributororder.ShopNumber = 1; // 购买店数
        this.sv_distributororder.gid = list[0].gid; // 套餐的唯一标识
        this.sv_distributororder.is_version_pack = list[0].is_version_pack; // 是否是版本套餐
        // 默认打开的标签页
        this.activeName = list[0].gid;
        // 实际购买金额
        this.actuallyPaid = this.sv_distributororder.sv_do_price;
        if (this.sv_distributororder.sv_salesversionid == 5) {
          this.sv_distributororder.sv_versionunit = "个店"; // 购买套餐版本单位
        } else {
          this.sv_distributororder.sv_versionunit = "年"; // 购买套餐版本单位
        }
        // 请求成功的回调
        this.versionTabData = list.map(v => {
          return { ...v };
        });
      });
    },
    // 标签页切换的回调
    handleClick(tab, event) {
      const tabData = tab.$attrs.value;
      this.sv_distributororder.sv_do_price = tabData.sv_versionsaleprice; // 套餐的价格
      this.sv_distributororder.gid = tabData.gid; //  套餐的唯一标识
      this.sv_distributororder.is_version_pack = tabData.is_version_pack; // 是否是版本套餐
      this.sv_distributororder.order_count = 1; // 购买年数
      this.sv_distributororder.sv_salesversion = tabData.sv_versionname; // 销售版本
      this.sv_distributororder.sv_salesversionid = tabData.sv_versionid; // 销售版本id
      this.sv_distributororder.ShopNumber = 1; // 购买店数
      // console.log(tab);
      if (this.sv_remarks == null) {
        this.sv_remarks = "版本信息";
      } else {
        this.sv_remarks = tabData.sv_remarks;
      }
      if (tabData.is_version_pack) {
        this.combo = tabData.package_remarks;
      } else {
        this.combo = "";
      }
      // 实际购买金额
      this.actuallyPaid = this.sv_distributororder.sv_do_price;
      if (tabData.sv_versionid == "5") {
        // 对至尊版的处理,tab切换初始化选择单位以及选择的数量
        this.sv_distributororder.sv_versionunit = "个店";
        this.extremeData.extremeBuyNum = 1;
        // 至尊版和升级为至尊版的计费方式一致
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price * this.extremeData.extremeBuyNum;
      } else if (tabData.sv_versionid == "3") {
        // 对连锁版的特殊处理，tab切换初始化选择单位以及选择的数量
        this.sv_distributororder.sv_versionunit = "年";
        this.chainData.shopName = "所有店铺";
        this.chainData.chainYear = 1;
        this.chainData.chainBuyNum = 1;
        if (this.sv_versionid == "3") {
          this.chainData.chooseWay = "renew";
          // 切换默认是所有店铺，所以对应付金额需要加上所有分店的金额
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price * this.chainShops.length;
        } else {
          // 免费版和高级试用版属于开通新套餐，只能开店以及购买分店
          this.chainData.chooseWay = "renew";
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price * this.chainData.chainBuyNum;
        }
      } else if (tabData.sv_versionid == "4") {
        // 对高级版的处理，tab切换初始化选择单位以及选择的数量
        this.advancedData.buyUnits = "年";
        this.advancedData.advancedYear = 1;
        this.advancedData.advancedMonth = 1;
      }
    },
    // 这个是高级版中的方法回调-----------------
    // 购买的方式--- 购买的单位，年/月
    handleAdvancedBuyUnits(val) {
      if (val == "年") {
        this.sv_distributororder.sv_do_price = 298;
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price * this.advancedData.advancedYear;
      } else {
        this.sv_distributororder.sv_do_price = 50;
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price *
          this.advancedData.advancedMonth;
      }
    },
    // 年数选择回调
    handleAdvancedYear(val) {
      this.actuallyPaid = this.sv_distributororder.sv_do_price * val;
    },
    // 月数的选择回调
    handleAdvancedMonth(val) {
      this.actuallyPaid = this.sv_distributororder.sv_do_price * val;
    },
    // 这个是高级版中的方法回调-----------------
    // 这个是连锁版中的方法回调-----------------
    // 连锁店铺选择框的回调
    handleChainShop(val) {
      // 这里要判断是购买分点还是续费---购买分店subbranch，续费店铺renew
      if (this.chainData.chooseWay == "subbranch") {
        // 购买分店需要计算分店数
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price *
          this.chainData.chainYear *
          this.chainData.chainBuyNum;
      } else {
        // 选中所有店铺后的店铺id为总店id，其余为相应选中的店铺id
        if (val == "allShops" || val == "所有店铺") {
          this.sv_distributororder.user_id = this.user_id;
          // 所有店铺计费需要加上所有店铺的费用
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price *
            this.chainShops.length *
            this.chainData.chainYear;
        } else {
          this.sv_distributororder.user_id = val;
          // 将获取的分店id存起来
          this.subbranch_id = val;
          // 这里要判断是购买分点还是续费---购买分店subbranch，续费店铺renew
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price * this.chainData.chainYear;
        }
      }
    },
    // 连锁店铺购买方式的回调
    handleChooseWay(val) {
      // 判断目前的方式是续费还是购买分店---购买分店subbranch，续费店铺renew
      if (val == "subbranch") {
        this.sv_distributororder.user_id = this.user_id;
        // 购买分店，连锁版和免费、高级试用版的计费方式一致
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price *
          this.chainData.chainYear *
          this.chainData.chainBuyNum;
      } else {
        this.chainData.chainBuyNum = 1;
        // 续费分店应该使用分店的id
        this.sv_distributororder.user_id = this.subbranch_id;
        // 选择续费分所有续费还是当个店铺续费
        if (
          this.chainData.shopName == "所有店铺" ||
          this.chainData.shopName == "allShops"
        ) {
          // 所有续费应当算上所有店铺的费用
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price *
            this.chainShops.length *
            this.chainData.chainYear;
        } else {
          // 单个店铺续费
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price * this.chainData.chainYear;
        }
      }
    },
    // 购买的分店数
    handleChainBuyNum(val) {
      // 购买分店数，连锁版和免费、高级试用版的计费方式一致
      this.actuallyPaid =
        this.sv_distributororder.sv_do_price * this.chainData.chainYear * val;
    },
    // 购买的年数
    handleChainYear(val) {
      // 判断是购买分店还是续费---购买分店subbranch，续费店铺renew
      if (this.chainData.chooseWay == "subbranch") {
        // 选择购买分店的时候，计费方式只计算分店数和购买的年数
        // 购买分店时的年数，连锁版和免费、高级试用版的计费方式一致
        this.actuallyPaid =
          this.sv_distributororder.sv_do_price *
          this.chainData.chainBuyNum *
          val;
      } else {
        // 选择续费的时候，判断是所有店铺还是单个店铺
        if (
          this.chainData.shopName == "所有店铺" ||
          this.chainData.shopName == "allShops"
        ) {
          // 所有店铺应该加上所有店铺的费用
          this.actuallyPaid =
            this.sv_distributororder.sv_do_price * this.chainShops.length * val;
          if (this.sv_versionid != 3) {
            this.actuallyPaid = this.sv_distributororder.sv_do_price * val;
          }
        } else {
          // 单个续费
          this.actuallyPaid = this.sv_distributororder.sv_do_price * val;
        }
      }
    },
    // 这个是连锁版中的方法回调-----------------
    // 这个是至尊版中的方法回调-----------------
    // 购买的分店数
    handleExtremeBuyNum(val) {
      // 至尊版和升级为至尊版的计费方式一致
      this.actuallyPaid = this.sv_distributororder.sv_do_price * val;
    },
    // 这个是至尊版中的方法回调-----------------
    // 确认购买的回调
    handlePayFor() {
      this.sv_distributororder.sv_do_price = this.actuallyPaid;
      // 判断下购买的套餐是什么版本id
      if (this.sv_distributororder.sv_salesversionid == "4") {
        this.sv_distributororder.user_id = this.user_id;
        // 购买高级版只能是高级或者免费、高级试用版本---版本sv_versionid为(1,2,4)
        // 高级版购买高级属于总店续费IsAddShop=1,订单类型为店铺续费sv_salestype = 1
        // 免费版和高级试用购买高级属于开通新套餐IsAddShop=6，订单类型为店铺升级sv_salestype = 2
        // 对版本单位进行判断，确定购买是年advancedYear还是月advancedMonth,把对应的年数/月数赋予order_count
        if (this.advancedData.buyUnits == "年") {
          this.sv_distributororder.order_count = this.advancedData.advancedYear;
        } else {
          this.sv_distributororder.order_count = this.advancedData.advancedMonth;
        }
        // 购买版本单位
        this.sv_distributororder.sv_versionunit = this.advancedData.buyUnits;
        // 判断进行续费升级的店铺版本
        if (this.sv_versionid == "4") {
          this.sv_distributororder.IsAddShop = "1";
          this.sv_distributororder.sv_salestype = "1";
        } else {
          this.sv_distributororder.IsAddShop = "6";
          this.sv_distributororder.sv_salestype = "2";
        }
        // console.log(this.sv_distributororder);
      } else if (this.sv_distributororder.sv_salesversionid == "3") {
        // 购买连锁版只能是免费、高级试用和连锁版---版本sv_versionid为(1,2,3)
        /**
         *  连锁版购买连锁分情况
         *    1.总店购买分店属于IsAddShop=2，订单类型为sv_salestype = 0
         *    2.总店续费属于IsAddShop=1，订单类型为sv_salestype = 1
         *    3.分店续费属于IsAddShop=0，订单类型为sv_salestype = 1
         *    4.所有店铺续费属于IsAddShop=3，订单类型为sv_salestype = 1
         **/
        // 免费版和高级版购买连锁属于开通连锁版及购买店铺IsAddShop=4，订单类型为sv_salestype = 2
        // 绑定购买分店数和年数
        this.sv_distributororder.order_count = this.chainData.chainYear; // 购买年数
        this.sv_distributororder.ShopNumber = this.chainData.chainBuyNum; // 购买店数
        // 判断进行续费升级的店铺版本
        if (this.sv_versionid == "3") {
          // 店铺续费订单
          this.sv_distributororder.sv_salestype = "1";
          // 判断总店续费还是购买分店---购买分店subbranch，续费店铺renew
          if (this.chainData.chooseWay == "subbranch") {
            // 购买新店订单
            this.sv_distributororder.sv_salestype = "0";
            // 总店购买分店
            this.sv_distributororder.IsAddShop = "2";
          } else {
            if (
              this.chainData.shopName == "allShops" ||
              this.chainData.shopName == "所有店铺"
            ) {
              // 所有店铺续费,需要算上所有已有的店铺数
              this.sv_distributororder.IsAddShop = "3";
              this.sv_distributororder.ShopNumber = this.chainShops.length;
            } else if (this.chainData.shopName == this.user_id) {
              // 总店续费
              this.sv_distributororder.IsAddShop = "1";
            } else {
              // 分店续费
              this.sv_distributororder.IsAddShop = "0";
            }
          }
        } else {
          this.sv_distributororder.ShopNumber -= 1;
          this.sv_distributororder.IsAddShop = "4";
          this.sv_distributororder.sv_salestype = "2";
        }
        // console.log(this.sv_distributororder);
      } else if (this.sv_distributororder.sv_salesversionid == "5") {
        // 所有版本均可购买至尊版---版本sv_versionid为(1,2,3,4,5)
        /**
         *  开通至尊以及购买分店
         *    1.免费版、高级试用版、高级版和连锁版属于开通至尊版IsAddShop=7，订单类型为sv_salestype = 2
         *    2.至尊版再次购买属于购买分店IsAddShop=8，订单类型为sv_salestype = 0
         */
        // 绑定购买店数
        this.sv_distributororder.ShopNumber = this.extremeData.extremeBuyNum;
        if (this.sv_versionid == "5") {
          this.sv_distributororder.IsAddShop = "8";
          this.sv_distributororder.sv_salestype = "0";
        } else {
          this.sv_distributororder.IsAddShop = "7";
          this.sv_distributororder.sv_salestype = "2";
        }
        // console.log(this.sv_distributororder);
      }
      if (this.sv_distributororder.sv_salesversionid == 3) {
        if (this.chainData.chooseWay == "renew") {
          if (this.chainData.shopName == this.user_id) {
            this.buyText = "总店续费";
          } else if (
            this.chainData.shopName == "所有店铺" ||
            this.chainData.shopName == "allShops"
          ) {
            this.buyText = "所有店铺续费";
          } else {
            this.buyText = "分店续费";
          }
        } else {
          this.buyText = "购买分店";
        }
      } else {
        this.buyText = "购买";
      }
      this.$api
        .versionUpgradeRenewal(
          this.user_id,
          "",
          this.sv_distributororder,
          this.myToken
        )
        .then(res => {
          const { ordercode, i } = res;
          if (i == 1) {
            this.$confirm(`是否确认${this.buyText}?`, "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.$api
                  .versionUpgradeRenewal(
                    this.user_id,
                    ordercode,
                    this.sv_distributororder,
                    this.myToken
                  )
                  .then(res => {
                    this.$message({
                      type: "success",
                      message: "购买成功！"
                    });
                    this.$router.push({
                      path: "myMerchant",
                      query: {
                        x: 1
                      }
                    });
                  });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消购买"
                });
                this.$router.push({
                  path: "versionUpdata",
                  query: {
                    user_id: this.$route.query.user_id,
                    sv_versionid: this.$route.query.sv_versionid
                  }
                });
              });
          } else if (i == 2) {
            this.$message({
              type: "info",
              message: "账户余额不足"
            });
          } else {
            this.$message.message("下单失败！请刷新后重试");
          }
        });
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.versionUp {
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 15px;
  }
  .version-item {
    width: 1000px;
    margin: 0 auto;
    padding: 18px 20px;
    background-color: #fff;
    &.versionTab {
      margin-bottom: 15px;
      .versionTip {
        position: absolute;
        top: 0;
        right: -70%;
        width: 100%;
        height: 100%;
        background: url("../../assets/组1.png") no-repeat;
      }
    }
    &.versionIn {
      display: flex;
      justify-content: space-between;
      .info-item {
        .item-title {
          margin-left: 20px;
          padding-bottom: 10px;
          font-weight: 600;
          border-bottom: 1px dashed #ccc;
        }
        ul {
          margin-top: 10px;
          margin-bottom: 0;
          li {
            list-style: circle;
            font-size: 14px;
          }
        }
      }
    }
    .comment {
      position: relative;
      left: 18px;
      width: 700px;
      margin-top: 30px;
      margin-bottom: 30px;
      .comment_title {
        float: left;
        color: #000;
        font-weight: 600;
        font-size: 14px;
        margin-right: 15px;
      }
      .comment_combo {
        color: red;
        font-size: 12px;
      }
    }
    .price {
      flex: 1;
      text-align: right;
      margin-right: 20px;
      .actuallyPaid {
        color: red;
        font-weight: 600;
        font-size: 26px;
        margin-right: 20px;
      }
    }
  }
  // 表单的每一项
  .versionTab @{deep} .el-form-item {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  // 表单的标题
  .versionTab @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
    margin-right: 10px;
  }
}
</style>